<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<script src="js/immersed.js"></script>
	</head>
	<script>
		var subBarHeight = STATUSBAR_HEIGHT + 44,
			height = STATUSBAR_HEIGHT + 84;
		var styleObj = document.createElement('style');
		styleObj.type = 'text/css';
		styleObj.innerHTML = ".sub-bar{height:" + subBarHeight + "px}.category{top:" + subBarHeight + "px}.cate{top:" + subBarHeight + "px}.status-bar-height{height:" + height + "px}";
		document.getElementsByTagName('HEAD').item(0).appendChild(styleObj);
	</script>
	<style>
		body {
			background-color: #eee;
			padding: 0;
			margin: 0;
		}
		
		.main-body {}
		
		.time {
			float: right;
			font-size: 12px;
			color: #999;
			border-radius: 2px;
		}
		
		.sub-bar {
			background-color: #45a75c;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 1;
		}
		
		.sub-bar .logo {
			position: absolute;
			left: 8px;
			bottom: 10px;
			width: 100px;
		}
		
		.sub-bar .search-bar {
			position: absolute;
			left: 115px;
			right: 10px;
			bottom: 8px;
			border-radius: 20px;
			height: 26px;
			background: rgba(255, 255, 255, 1);
		}
		
		.sub-bar .search-bar i {
			display: block;
			height: 2px;
			width: 30px;
			text-align: center;
			line-height: 28px;
			color: #999;
			font-size: 18px;
		}
		
		.sub-bar .search-bar p {
			position: absolute;
			bottom: 2px;
			left: 50px;
			right: 50px;
			text-align: center;
			color: #999;
			font-size: 13px;
		}
		
		.category {
			position: fixed;
			left: 0;
			right: 0;
			background-color: #fff;
			height: 35px;
			z-index: 100;
		}
		
		.textslider {
			padding: 0 7px;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
		}
		
		.category .cate-name {
			margin-top: 2px;
			line-height: 31px;
			font-size: 13px;
			color: #777;
			padding: 0 8px;
			display: inline-block;
		}
		
		.category .cate-name.active {
			color: #45a75c;
			border-bottom: #04BE02 2px solid;
		}
		.category .cate-open{
			position: absolute;
			right: 0px;
			top:0 ;
			background-color: #fff;
			height: 35px;
			line-height: 35px;
			width: 35px;
			text-align: center;
		}
		/*goods-item*/
		
		.goods-item-box {
            width: 50%;
            float: left;
            background-color: #fff
        }
        
        .goods-item-box>div {
            padding: 5px;
        }
        
        .goods-item-box .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 15px;
            line-height: 30px
        }
        
        .goods-item-box .footer {
            position: relative;
        }
        
        .goods-item-box .footer .price {
            color: #ff0000;
            font-size: 16px;
        }
        
        .goods-item-box .footer .time {
            position: absolute;
            right: 0;
            top: 8px;
            font-size: 10px;
            color: #999
        }
        
        .goods-item-box .img {
            position: relative;
        }
        
        .goods-item-box .img img {
            width: 100%;
            display: block
        }
        
        .goods-item-box .img .icon-videofill {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 30px;
            height: 30px;
            text-align: center;
            background-color: rgba(255, 255, 255, .5);
            border-radius: 50%;
            font-size: 25px;
            line-height: 33px;
        }
        
        .cate{
			position: fixed;
			left: 0;
			right:0;
			background-color: #fff;
			z-index: 200;
			padding: 0 5px 10px 5px;
			z-index: 100;
		}
		.cate h3{
			font-size: 14px;
			font-weight: 400;
			color:#333;
			padding:5px 5px 3px 5px;
		}
		.cate > div{
			float:left;
			width: 25%;
			padding: 5px 0;
		}
		.cate a{
			display: block;
			color:#666;
			padding: 4px 6px;
			text-align: center;
			border-radius: 2px;
			margin:0 5px;
			font-size: 14px;
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
			background-color: #ccc;
		}
		.cate a.active{
			background-color: #45a75c;
			color:#fff
		}
	</style>

	<body>
		<div id="app">

			<div class="sub-bar">
				<img class="logo" src="images/logo.png">
				<div class="search-bar" onclick="clicked('goods_search.html')">
					<i class="iconfont icon-search"></i>
					<p>搜索更多宝贝</p>
				</div>
			</div> 

			<div class="category line-bottom" ref="category">
				<div class="textslider">
					<a v-for="(vo,index) in category" class="cate-name" :class="{'active':vo.active}" @click="selectCategory(index)" v-html="vo.title"></a>
				</div>
				<i class="iconfont icon-unfold cate-open" @click="cateBox=true"></i>
			</div>
			
			<div class="cate" v-if="cateBox">
				<h3 flex="">
					<span flex-box="1">产品分类</span>
					<span flex-box="0"><i class="iconfont icon-fold" @click="cateBox=false" style="font-size: 18px;"></i></span>
				</h3>
				<div v-for="(vo,index) in category" >
					<a href="javascript:;" :class="{'active':vo.active}" @click="selectCategory(index)">{{vo.title}}</a>
				</div>
				<div style="clear: both;"></div>
			</div>

			<div class="status-bar-height"></div>
		<div style="background-color:#fff" v-if="items.length>0">
            <template v-for=" (vo,index) in items "> 
            
            <div class="goods-item-box" @click="showGoods(vo.id,vo.title)">
                <div>
                    <div class="img">
                        <img class="lazy" :data-original="vo.pics[0]+'@!400x400'" src="images/nopic.gif">
                        <i class="iconfont icon-videofill" v-if="vo.video_id>0"></i>
                    </div>
                    <div class="title">{{vo.title}}</div>
                    <div class="footer">
                        <span class="price">&yen;{{vo.cost}}</span>
                        <span class="time">{{vo.time}}</span>
                    </div>
                </div>
            </div>
           </template>

            <div style="clear:both"></div>
            </div>
			<!--<template v-for=" (vo,index) in items ">
				<div class="goods-item line-bottom" @click="showGoods(vo.id)">
					<div class="title" v-html="vo.title"></div>
					<div class="brief" v-html="vo.brief"></div>
					<div class="price"><span>成本价：</span>&yen;{{vo.cost}}<span style="margin-left: 20px;">珠宝玉石价：</span>&yen;{{vo.price}}</div>
					<div class="pics">
						<div class="img" v-for="(v,index) in vo.pics ">
							<img class="lazy" :data-original="v+'@!200x200'" src="images/nopic.gif" v-if="index < 4">
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="tools" flex="">
						<span flex-box="0" class="time">{{vo.time}}</span>
						<span flex-box="1"></span>
						<span flex-box="0" class="favor" @click.stop="favor(vo.id,index)" v-if="vo.is_favor != null" style="color: #45a75c;"><i class="iconfont icon-favorfill"></i> 收藏</span>
						<span flex-box="0" class="favor" @click.stop="favor(vo.id,index)" v-else><i class="iconfont icon-favor"></i> 收藏</span>
						<span flex-box="0" class="share" @click.stop="share(index)"><i class="iconfont icon-share"></i> 转发</span>
					</div>
				</div>
			</template>-->

			<template v-if="loading == 'inits'">
				<div flex="main:center cross:center" style="width:100%; height: 400px; ">
					<img src="images/slogo.png" style="width: 180px;">
				</div>
			</template>

			<template v-if="loading == 'nodata'">
				<div flex="main:center cross:center" style="width:100%; height: 400px; ">
					<img src="images/nodata.png" style="width: 150px;">
				</div>
			</template>

			<template v-if="loading == 'more'">
				<div class="weui-loadmore">
					<i class="weui-loading"></i>
					<span class="weui-loadmore__tips">加载更多</span>
				</div>
			</template>

			<template v-if="loading == 'more_nodata'">
				<div class="weui-loadmore weui-loadmore_line">
					<span class="weui-loadmore__tips" style="background: #eee;">没有啦</span>
				</div>
			</template>

		</div>
		</div>

		<div id="toTop" onclick="Top()">
			<i class="iconfont icon-top"></i>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/imgload.js"></script>
		<script src="js/systemShare.js"></script>
		<script src="js/wxShare.js"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/jquery.lazyload.js"></script>
		<script src="js/common.js"></script>

		<script type="text/javascript" charset="utf-8">
			mui.init();
			var vm, self;
			mui.plusReady(function() {
				self = plus.webview.currentWebview();
				self.setPullToRefresh({
					support: true,
					style: 'circle',
					color: '#57a30d',
					offset: '99px'
				}, refresh);
				self.beginPullToRefresh();
			});

			//监听是否滚动到底部
			document.addEventListener("plusscrollbottom", getMoreData, false);

			//加载更多
			function getMoreData() {
				vm.getMore();
			}

			// 刷新页面
			function refresh() {
				vm.inits();
			}

			//监听滚动显示回到顶部图标
			document.addEventListener("scroll", function() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				if(scrollTop > 1500) {
					$("#toTop").show()
				} else {
					$("#toTop").hide();
				}
			}, false);

			vm = new Vue({
				el: "#app",
				data: {
					category: '',
					items: [],
					k: '',
					p: 1,
					r: 10,
					loading: 'inits',
					ismore: false,
					cateBox:false
				},
				mounted: function() {
					var vm = this;

					Get(SERVER_URL + "&c=Public&a=getConfig", {
						keys: 'CATEGORY_CONFIG'
					}, function(data) {
						vm.category = data.info.CATEGORY_CONFIG;
					})
				},
				methods: {

					inits: function() {
						var vm = this;
						$(document.body).animate({
							scrollTop: 0
						}, 0);
						Get(SERVER_URL + "&c=Goods&a=datalist", {
							p: 1,
							r: vm.r,
							k: vm.k
						}, function(data) {
							if(data.status) {
								vm.items = data.info;
								vm.p = 2;
								vm.loading = 'more';
								self.endPullToRefresh();
								vm.$nextTick(function() {
									$("img.lazy").lazyload({
										container: $(document.body),
									});
								})
							} else {
								self.endPullToRefresh();
								vm.loading = 'nodata';
							}
						})
					},

					getMore: function() {
						var vm = this;
						if(vm.ismore) return;
						vm.ismore = true;
						Get(SERVER_URL + "&c=Goods&a=datalist", {
							p: vm.p,
							r: vm.r,
							k: vm.k
						}, function(data) {
							if(data.status) {
								for(var i in data.info) {
									vm.items.push(data.info[i]);
								}
								vm.p++;
								vm.ismore = false;
								vm.$nextTick(function() {
									$("img.lazy").lazyload({
										container: $(document.body),
									});
								})
							} else {
								vm.loading = 'more_nodata';
								vm.ismore = false;
							}

						})

					},

					selectCategory: function(index) {
						var vm = this;
						///alert(index)
						vm.cateBox=false; 
						vm.category.map(function(v, i) {
							if(i == index) {
								vm.k = v.keyword;
								v.active = true;
								self.beginPullToRefresh();
								vm.inits()
							} else {
								v.active = false;
							}
						})
					},

					showGoods: function(id) {
						clicked('goods_details.html?id=' + id, 'pop-in');
					},

					favor: function(id, index) {
						Get(SERVER_URL + "&c=Favor&a=setFavor", {
							id: id
						}, function(data) {
							if(data.status) {
								if(data.info == 'add') {
									vm.$set(vm.items[index], 'is_favor', 1)
								}

								if(data.info == 'delete') {
									vm.$set(vm.items[index], 'is_favor', null)
								}

								//plus.webview.getWebviewById('favor.html').evalJS("getInits()");
							}
						})
					},

					share: function(index) {
						var vm = this;
						var goodsInfo = vm.items[index]
						if(plus.os.name == 'Android') {
							plus.nativeUI.actionSheet({
								title: "分享",
								cancel: "取消",
								buttons: [{
									title: "一键转发"
								}, {
									title: "转发链接"
								}, {
									title: "下载组图"
								}, {
									title: "复制描述"
								}]
							}, function(e) {
								var index = e.index;
								switch(index) {
									case 0:
										break;
									case 1:
										easyShare(goodsInfo.pics, '【价格】' + goodsInfo.price + '\n【描述】' + goodsInfo.brief);
										break;
									case 2:
										shareLink(goodsInfo.brief + ',' + goodsInfo.price + '元', goodsInfo.pics[0], "http://shop.51jushi.com/index.php?m=Store&c=index&a=goods&id=" + goodsInfo.id);
										break;
									case 3:
										DownloadPics(goodsInfo.pics)
										break;
									case 4:
										copyToClip('【标题】' + goodsInfo.title + '\n【价格】' + goodsInfo.price + '\n【描述】' + goodsInfo.brief);
										break;
									default:
										// 其它
										break;
								}
							});
						}

						if(plus.os.name == 'iOS') {
							plus.nativeUI.actionSheet({
								title: "分享",
								cancel: "取消",
								buttons: [{
										title: "一键转发"
									},
									{
										title: "转发链接"
									},
									{
										title: "下载组图"
									},
									{
										title: "复制描述"
									}
								]
							}, function(e) {
								var index = e.index;
								switch(index) {
									case 0:
										break;
									case 1:
										copyToClip('【标题】' + goodsInfo.title + '\n【价格】' + goodsInfo.price + '\n【描述】' + goodsInfo.brief);
										jushiShare.share(goodsInfo.pics);
										break;
									case 2:
										jushiShare.share(goodsInfo.pics[0], "http://shop.51jushi.com/index.php?m=Store&c=index&a=goods&id=" + goodsInfo.id, goodsInfo.brief + ',' + goodsInfo.price + '元')
										break;
									case 3:
										DownloadPics(goodsInfo.pics)
										break;
									case 4:
										copyToClip('【标题】' + goodsInfo.title + '\n【价格】' + goodsInfo.price + '\n【描述】' + goodsInfo.brief);
										break;
									default:
										// 其它
										break;
								}
							});
						}
					}

				}
			})
		</script>
	</body>

</html>